<template>
  <div>
    <el-container class="layout">
      <el-header class="header" height="auto">
        <!-- 头部 -->
        <app-header />
      </el-header>

      <el-container class="container-right">
        <el-aside width="220px" class="aside">
          <!-- 左侧菜单 -->
          <app-lefter />
        </el-aside>
        <el-main class="main">
          <!-- 内容 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <el-backtop
      style=" height: 32px;
        width: 32px; background-color: var(--text-color);border-radius: 4px;z-index:10;right:20px;bottom:20px;"
    >
      <div
        style="{
        height: 32px;
        width: 32px;
        background-color: var(--text-color);
        text-align: center;
        line-height: 32px;
        color: #ffffff;
        border-radius: 4px;
      }"
      >
        <i class="el-icon-arrow-up"></i>
      </div>
    </el-backtop>
  </div>
</template>
<script>

import AppHeader from '@/components/layout/app-header.vue'
import AppLefter from '@/components/layout/app-lefter.vue'
export default {
  components: { AppLefter, AppHeader },
  // inject: ['reload'],
  name: 'layout',
  data () {
    return {}
  },
  computed: {},
  created () {},
  mounted () {
    this.getPlatformConfigs()
    // 获取系统配置信息
    this.$api.setting.getConfigs()
    this.initDownExcel()
  },
  methods: {
    // 获取平台配置信息
    getPlatformConfigs () {
      this.$api.setting.getPlatformConfigs().then(res => {
        if (this.$ok(res)) {
          this.$store.commit('SET_CONF', res.data)
        }
      })
    },
    initDownExcel () {
      window.downExcel = function (res, name) {
        name = name || 'template'
        let link = document.createElement('a')
        link.id = 'test'
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        // 下载后文件名
        link.download = name + '.xlsx'
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        // eslint-disable-next-line no-undef
        document.body.removeChild(link)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100vh;
  background: #ffffff;

  .header {
    width: 100%;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 999;
    background: #ffffff;
  }

  .aside {
    min-height: 100vh;
    position: fixed;
    left: 0;
  }

  .container-right {
    margin-left: 220px;
    margin-top: 56px;
    .main {
      position: relative;
      background: #EBEDF0;
      padding: 0px;

      & > div {
        background-color: $backgroundColor;
        min-height: calc(100vh - #{$appHeaderHeight} - #{$pageHeaderHeight});
      }
    }
  }
}
</style>
